<template>
  <div>
    <header-top title="班级成绩分析" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div style="background:#f8f8f8"  class="content clearfix">
      <ul class="studentExam">
        <li @click="classSelect" class="select">
          {{className}}
        </li>
        <li @click="typeSelect" class="select">
          {{typeName}}
        </li>
        <li v-if="show" @click="exam1Select" class="select">
          {{exam1Name}}
        </li>
        <li v-if="show" @click="exam2Select" class="select">
          {{exam2Name}}
        </li>

      </ul>
      <button @click="sub" class="button" >查询</button>

      <div v-if="showEchat" class="echat">
        <div id="echartContainer" style="width:100%; height:400px"></div>
      </div>

      <ul  v-if="showList" class="exam">
        <li>
          <div class="studentTitle clearfix">
            <p>姓名</p>
            <p>班级</p>
            <p></p>
            <p>分数</p>
          </div>
        </li>
        <li v-for="(item,index) of examAna" :key="item.id">
          <div class="student clearfix">
            <p>{{index+1}}</p>
            <p>{{item.studentName}}</p>
            <p></p>
            <p>{{item.totalScore}}</p>

          </div>
        </li>
      </ul>

    </div>
    <div v-if="showClass" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="showClass"
      show-toolbar
      title='选择班级'
      :columns="classCon"
      @cancel="onCancel"
      @confirm="onClass"
      :default-index=classIndex
    />
    <div v-if="showType" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="showType"
      show-toolbar
      title='分析内容'
      :columns="typeCon"
      @cancel="onCancel"
      @confirm="onType"
      :default-index=typeIndex
    />
    <div v-if="showExam1" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="showExam1"
      show-toolbar
      title='选择考试'
      :columns="examCon"
      @cancel="onCancel"
      @confirm="onExam1"
      :default-index=exam1Index
    />
    <div v-if="showExam2" class="zz"></div>
    <van-picker
      class="fixedBottom"
      v-if="showExam2"
      show-toolbar
      title='选择考试'
      :columns="examCon"
      @cancel="onCancel"
      @confirm="onExam2"
      :default-index=exam2Index
    />
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import { Toast } from 'vant';   //使用消息提示
  import {reqExamList,reqClassAnalyze} from "@/api";
  var echarts = require('echarts')
  export default {
    name: "classAnalyze",
    components:{
      headerTop:headerTop,

    },
    data(){
      return{
        //显示参数
        show:false,
        showExam1:false,
        showExam2:false,
        showClass:false,
        showType:false,
        showEchat:false,
        showList:false,

        //选项名称
        className:'选择班级',
        typeName:'分析内容',
        exam1Name:'选择考试1',
        exam2Name:'选择考试2',
        //选项默认值
        classIndex:0,
        typeIndex:0,
        exam1Index:0,
        exam2Index:0,
        //选项数据
        classCon: [{text:'选择班级',classId:null,gradeId:null}],
        typeCon: [{text:'分析内容',type:null},{text:'总成绩上升排名',type:'up'},{text:'总成绩下降排名',type:'down'},{text:'年级前50名变化趋势图',type:'50'},{text:'年级前100名变化趋势图',type:'100'}],
        examCon:[{text:'选择考试',examId:null}],

        //请求参数
        type:null,
        classId:null,
        gradeId:null,
        examId1:null,
        examId2:null,
        //接收参数
        examAna:null,

        //图标数据
        option: {
          tooltip: {
            trigger: 'axis'
          },

          grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            top:'3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018.3','2018.4','2018.5']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'语文',
              type:'line',
              stack: '总量',
              data:['100','90','110']
            },
            {
              name:'数学',
              type:'line',
              stack: '总量',
              data:['50','120','80']
            },
            {
              name:'外语',
              type:'line',
              stack: '总量',
              data:['150','60','80']
            },
            {
              name:'物理',
              type:'line',
              stack: '总量',
              data:['60','40','90']
            },
          ]
        },

      }
    },
    mounted(){
      let classList = this.$store.state.teacherClass
      for(let item of classList) {
        this.classCon.push({text:item.gradeClassName,classId:item.id,gradeId:item.gradeId})
      }
    },
    methods:{
      classSelect(){
        this.showClass = true;
      },
      typeSelect(){
        this.showType = true;
      },
      exam1Select(){
        this.showExam1 = true;
      },
      exam2Select(){
        this.showExam2 = true;
      },
      onCancel() {
        this.showClass = false
        this.showType = false
        this.showExam1 = false
        this.showExam2 = false

      },
      async onClass(value,index){
        this.showClass = false
        this.classIndex = index
        this.className = value.text
        this.classId = value.classId
        this.gradeId = value.gradeId
        let exams = await reqExamList(this.gradeId)
        this.examCon = [{text:'选择考试',examId:null}]
        for(let exam of exams.data){
          this.examCon.push({
            text:exam.examName,
            examId:exam.examId

          })
        }
        this.examId1 = null
        this.examId2 = null
        this.exam1Index = 0
        this.exam2Index = 0
        this.exam1Name='选择考试1'
        this.exam2Name='选择考试2'



      },
      onType(value,index){
        this.show = false

        if(!this.gradeId) {
            Toast('请选择班级')
          this.showType = false
          return
        }
        this.type = value.type
        this.typeName = value.text
        this.showType = false
        this.typeIndex = index
        if(value.type == 'up' || value.type == 'down') {
          this.showEchat = false
          this.show = true

        }else{
          this.showList = false
        }


      },
      onExam1(value,index){
        this.exam1Name = value.text
        this.examId1 = value.examId
        this.showExam1 = false
        this.exam1Index = index

      },
      onExam2(value,index){
        if(!this.examId1){
          Toast('请选择考试1')
          this.showExam2 = false
          return
        }
        this.exam2Name = value.text
        this.examId2 = value.examId
        this.showExam2 = false
        this.exam2Index = index
        if(this.examId1 == this.examId2){
          Toast('两次考试重复，请重新选择')
          this.examId2 = null
          this.exam2Index = 0;
          this.exam2Name = "选择考试2"
          this.showExam2 = false
          return
        }



      },
      async sub(){
        let analyze = await reqClassAnalyze(this.examId1,this.examId2,this.classId,this.gradeId,this.type)
        this.examAna = analyze.data
        if(this.type == 'up' || this.type == 'down'){
          //比较两次考试上升或下降
          if(!this.examId2){
            Toast('请选择考试2')
            return
          }
          this.showList = true

        }else{
          //获取前50趋势图
          if(!this.type){
            Toast('请选择分析内容')
            return
          }
          this.showEchat = true  //显示趋势图
          this.option.xAxis.data = []
          this.option.series = [{
            name:'人数',
            type:'line',
            data:[]
          }]
          let ana = await reqClassAnalyze(this.examId1,this.examId2,this.classId,this.gradeId,this.type)
          for (let exam of ana.data){
            this.option.xAxis.data.unshift(exam.examName)
            this.option.series[0].data.unshift(exam.gradeRank)
          }
          //画图
          var myChart = echarts.init(document.getElementById('echartContainer'));
          myChart.setOption(
            this.option
          )
          myChart.clear();
          myChart.setOption(this.option,true);
        }
      }

    }
  }
</script>

<style scoped>
  .studentExam{ margin-top: 0.5rem; background: #fff;}
  .studentExam .select{width: 100%; height: 3.5rem; line-height: 3.5rem;  padding-left: 1rem; box-sizing: border-box; font-size: 1.1rem; color: #666;
    background:url("./images/studentExamIcon.png") no-repeat 25rem center; background-size: 0.5rem auto; border-bottom: 1px solid #f8f8f8 }
  .text{width: 100%; height: 3.5rem; line-height: 3.5rem; box-sizing: border-box; font-size: 1.1rem; color: #666;border-bottom: 1px solid #f8f8f8  }
  .text input{width: 100%; box-sizing: border-box; padding-left: 1rem; font-size: 1.1rem; height: 3.5rem; line-height: 3.5rem;}
  .button{width: 25rem; height: 2.9rem; line-height: 2.9rem; text-align: center; margin: 1.7rem auto 0; display: block; background: #00c08c; border: none; font-size:1.1rem; color: #fff; }
  .text input::-webkit-input-placeholder{
    color:#666;
  }
  .text input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#666;
  }
  .text input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#666;
  }
  .text input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#666;
  }

  .echat{ width: 100%; height: 400px; background: #fff; margin-top: 1.7rem;}
  .exam{width: 100%; background: #fff; margin-top: 1.7rem;}
  .studentTitle,.student{ border-bottom: 1px solid #f8f8f8}
  .studentTitle p,.student p{ height:2.8rem;line-height: 2.8rem;font-size: 1.1rem;color: #666; float: left; text-align: center; box-sizing: border-box; }
  .studentTitle p{color: #00c08c}
  .studentTitle p:nth-child(1),.student p:nth-child(1){
    width:30%;
  }
  .studentTitle p:nth-child(2),.student p:nth-child(2){
    width:40%;
  }
  .studentTitle p:nth-child(3),.student p:nth-child(3){
    width:5%;
  }

  .student p:nth-child(4){
    width:15%;
  }
  .studentTitle p:nth-child(4){
    width:25%;
  }

</style>
